/*
 * @Author: kanglang
 * @Date: 2020-12-09 14:25:51
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-15 10:41:53
 * @Description: 用户反馈--联系人
 */
import React, { useState } from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
import { isAndroid, px2dp, } from '@/styles';
import { Check } from '@/common';

const ContractBox = ({ checked, switchChecked, onChangeContract, name, mobile, keyboardHeight }) => {
  const onChange = (type, text) => {
    onChangeContract && onChangeContract(type, text);
  };
  return (
    <View style={styles.container}>
      <View style={styles.contractBox}>
        <Text style={styles.contractTip}>联系方式</Text>
        <View style={styles.checkBox}>
          <Text style={styles.nmTip}>匿名反馈</Text>
          <Check
            style={styles.check}
            checked={checked}
            onCheck={switchChecked}
          />
        </View>
      </View>
      {
        !checked &&
        <View>
          <TextInput
            style={[styles.txtIpt, { marginBottom: keyboardHeight }]}
            placeholder='请输入您的姓名'
            placeholderTextColor='#CDCCC9'
            value={name}
            maxLength={4}
            onChangeText={(text) => onChange('name', text)}
            underlineColorAndroid='transparent'
            multiline={false}
          />
          <TextInput
            style={[styles.txtIpt, { marginBottom: keyboardHeight }]}
            placeholder='请输入您的电话'
            placeholderTextColor='#CDCCC9'
            value={mobile}
            maxLength={11}
            onChangeText={(text) => onChange('mobile', text)}
            underlineColorAndroid='transparent'
            multiline={false}
            keyboardType={isAndroid ? 'numeric' : 'decimal-pad'}
          />
        </View>
      }
    </View>

  );
};
export default ContractBox;
const styles = StyleSheet.create({
  container: {
    marginVertical: px2dp(24),
    backgroundColor: '#FFFFFF',
    padding: px2dp(32)
  },
  contractBox: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  contractTip: {
    fontSize: px2dp(32),
    color: '#343332',
  },
  checkBox: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  nmTip: {
    fontSize: px2dp(28),
    color: '#9D9A95',
    marginRight: px2dp(16)
  },
  check: {
    width: px2dp(32),
    height: px2dp(32)
  },
  txtIpt: {
    height: px2dp(96),
    fontSize: px2dp(28),
    color: '#343332',
  }
});
